<template>
    <div>
        <table class="distillation-table">
            <tr>
                <th width="5%">序号</th>
                <th width="15%">问题蒸馏词</th>
                <th width="30%">问题</th>
                <th width="5%">序号</th>
                <th width="15%">问题蒸馏词</th>
                <th width="30%">问题</th>
            </tr>
        </table>
        <table class="distillation-table" v-if="tableData.length">
            <tr v-for="(row, index) in tableData" :key="index">
                <td width="5%">{{ row.item1.index }}</td>
                <td width="15%">{{ row.item1.Keyword }}</td>
                <td width="30%">{{ row.item1.Title }}</td>
                <td width="5%" v-if="row.item2">{{ row.item2.index }}</td>
                <td width="15%" v-if="row.item2">{{ row.item2.Keyword }}</td>
                <td width="30%" v-if="row.item2">{{ row.item2.Title }}</td>
            </tr>
        </table>
        <div v-else>
            <el-empty :image-size="200" />
        </div>
        <div class="flex flex-center pt-10px pb-10px">
            <Pagination v-if="tableData.length > 0" v-model:total="page.total" v-model:page="queryParams.curPage" v-model:limit="queryParams.pageSizes" @pagination="handleQuery" />
        </div>
    </div>
</template>

<script setup lang="ts">

const props = defineProps({
    tableData: {
        type: Array<any>,
        default: () => []
    },
    page:{
        type: Object,
        default: () => {}
    }
})

const emit = defineEmits(['update:data'])

const queryParams = reactive({
    curPage: props.page.curPage,
    pageSizes: props.page.pageSizes,
    type:props.page.type,
    limit:props.page.limit,
})

function handleQuery(val: any) {
    queryParams.limit = val.limit
    emit('update:data', queryParams)
}

</script>

<style scoped>

</style>